<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/order_detyails.css"/>
		<link rel="stylesheet" type="text/css" href="css/public.css"/>
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
		<style type="text/css">
			.mui-content{margin-top: 45px;}
			.statesAddressName{text-align: left; display: inline-block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
			.statesAddressName+span{display: inline-block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
		</style>
	</head>

	<body>
	<!--------头部返回收货地址----------->
		<div id="headerNav"></div>
	<!--------填写登录内容----------->
		<div class="mui-content">    
           
			<ul class="mui-table-view" style="background: RGBA(87, 99, 255, 1);margin-top:0;">
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-right" src="image/icon_tu.png">
						<div class="mui-media-body">
							<p style="font-size:16px;font-weight:400;color:rgba(255,255,255,1);" class="states"></p>
							<p class='mui-ellipsis timereduce' id="timers" style="display: none; font-size:12px;font-weight:400;color:rgba(255,255,255,1);"></p>
						</div>
					</a>
				</li>
			</ul>
			<div class="mui-table" style="background: white;">
                <div class="mui-table-cell mui-col-xs-12">

                    <p class="mui-h5 mui-ellipsis statesAddress" style="padding-top:12px;padding-left: 12px;"></p>
                </div>
                <!--<div class="mui-table-cell mui-col-xs-4 mui-text-left">
                    <span class="mui-h5" style="padding-right: 12px;">17635125463</span>
                </div>-->
            </div>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;" style="padding-top:12px;">
						<img class="mui-media-object mui-pull-left statesImg" style="max-width:92px;height:92px;">
						<div class="mui-media-body">
							<p class='mui-ellipsis statesName' style="font-size:14px;font-weight:400;color:rgba(51,51,51,1);"></p>
							<p class='mui-ellipsis statesSpecific' style="font-size:14px;font-weight:400;color:rgba(51,51,51,1);display: inline-block;float:left"></p><p style="display: inline-block;float:right" class="statesMath"></p>		
						</div>
					    <div class="mui-table" style="background: white;">
			                <div class="mui-table-cell mui-col-xs-8">
			                    <h5 style="padding-top:12px;" class="statesPrice">商品金额</h5>
			                </div>
			                <div class="mui-table-cell mui-col-xs-4 mui-text-right">
			                    <span class="mui-h5 statesAllprice" style="padding-right: 12px;"></span>
			                </div>
			            </div>
			            <div class="mui-table" style="background: white;">
			                <div class="mui-table-cell mui-col-xs-8">
			                    <h5 style="padding-top:12px;">运费</h5>
			                </div>
			                <div class="mui-table-cell mui-col-xs-4 mui-text-right">
			                    <span class="mui-h5" style="padding-right: 12px;">￥0.00</span>
			                </div>
			            </div>
			            <div class="mui-table" style="background: white;">
			                <div class="mui-table-cell mui-col-xs-8">
			                    <h5 style="padding-top:12px;">支付金额：</h5>
			                </div>
			                <div class="mui-table-cell mui-col-xs-4 mui-text-right">
			                    <span class="mui-h5 statesPay" style="padding-right: 12px;font-size:20px;color:rgba(87,99,255,1);font-weight:bold;">￥29.9</span>
			                </div>
			            </div>
					</a>
				</li>
			</ul>
       		<div class="mui-table" style="background: white;">
                <div class="mui-table-cell mui-col-xs-12">
                    <h5 style="padding-top:12px;padding-left: 12px;font-size:18px;font-weight:400;color:rgba(51,51,51,1);">订单信息</h5>
                </div>
            </div>
            <div class="mui-table" style="background: white;">
                <div class="mui-table-cell mui-col-xs-12">
                    <h5 style="padding-top:12px;padding-left: 12px;font-size:14px;font-weight:400;color:rgba(153,153,153,1);" class="statesNumber"></h5>
                </div>
            </div>
            <div class="mui-table" style="background: white;">
                <div class="mui-table-cell mui-col-xs-12">
                    <h5 style="padding-top:12px;padding-left: 12px;font-size:14px;font-weight:400;color:rgba(153,153,153,1);" class="statesTime"></h5>
                </div>
            </div>
            <div class="mui-table" style="background: white;">
                <div class="mui-table-cell mui-col-xs-12">
                    <h5 style="padding-top:12px;padding-left: 12px;font-size:14px;font-weight:400;color:rgba(153,153,153,1);" class="statesPayTime"></h5>
                </div>
            </div>
            
		</div>
		
	<!--------确认登录----------->
		<div style="height:30px;"></div>
		
	</body>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
		$('#headerNav').load('header.html',function(){
			$('header h1').html('订单详情');
		});
		var dataNow=Date.parse(new Date())/1000;
		//倒计时
		function countDown(times){
		  var timer=null;
		  timer=setInterval(function(){
		    var day=0,
		      hour=0,
		      minute=0,
		      second=0;//时间默认值
		    if(times > 0){
		      day = Math.floor(times / (60 * 60 * 24));
		      hour = Math.floor(times / (60 * 60)) - (day * 24);
		      minute = Math.floor(times / 60) - (day * 24 * 60) - (hour * 60);
		      second = Math.floor(times) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
		    }
		    if (day <= 9) day = '0' + day;
		    if (hour <= 9) hour = '0' + hour;
		    if (minute <= 9) minute = '0' + minute;
		    if (second <= 9) second = '0' + second;
		    // 
		    times--;
			if(times>0){
				 document.getElementById('timers').innerHTML='剩'+hour+"小时"+minute+"分钟订单自动关闭";
		    }else{
		    	document.getElementsByClassName('states')[0].innerHTML='已失效';
		    	  document.getElementById('timers').innerHTML="订单已关闭";
		    	  $.ajax({
					type:"post",
					url:"http://mall.itcn99.com/i/index/order_Cancel",
					async:true,
					dataType:'jsonp',
					data:{
						"uid":b,
						"oid":checked,
						"status":2	
					},
					success:function(data){
//						console.log(data)
						if(data.state == 1){
							clearInterval(timer);
							mui.alert("","订单已失效",function(){
								window.location.href="my_order.html"
							})
						}
					}
				});
		    }
		   
		  
		  },1000);
		  if(times<=0){
		    clearInterval(timer);
		  }
		}
		
		function timestampToTime(timestamp) {
	        var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
	        var Y = date.getFullYear() + '-';
	        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
	        var D = date.getDate() + ' ';
	        var h = date.getHours() + ':';
	        var m = date.getMinutes() + ':';
	        var s = date.getSeconds();
	        return Y+M+D+h+m+s;
	    }
		var a = localStorage.state;
		var b = localStorage.data;
		function GetQueryString(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
				var r = window.location.search.substr(1).match(reg);
				if(r != null) return unescape(r[2]);
				return null;
			}

			var checked = GetQueryString("id");
			var states=GetQueryString('state');
			console.log(states);
			
//			接收参数uid:用户id 、 oid:订单id 、 status:待付款、待发货、待收货、已完成的状态 值	
//			img：商品图片、name:商品标题、specific：商品规格、allprice：订单总价、number订单编号、
//			state：订单状态。。time：订单创建时间、pay_time支付时间、delivery_time发货时间、
//			success_time订单完成时间、address地址详情
				
				$.ajax({
							type:"post",
							url:"http://mall.itcn99.com/i/index/order_details",
							async:true,
							data:{
								'uid':b,
								"status":states,
								'oid':checked
							},
							dataType:'jsonp',
							success:function(data){
								console.log(data)
								var statesImg=data.data.img;
								var statess=data.data.state;
								var statesAddressName=data.data.address.name;
								var statesAddress=data.data.address;
								var statesName=data.data.name;
								var statesSpecific=data.data.specific;
								var statesAllprice=data.data.allprice;
								var statesMobile=data.data.mobile;
								var statesMath=data.data.math;
								var statesNumber=data.data.number;
								var statePayTime=timestampToTime(data.data.pay_time);
								var stateTime=timestampToTime(data.data.time);
								var stateTimeList=data.data.time;
//								var statesMobile=data.data.address.mobile;
								console.log(statesMobile)
								$('.timereduce').hide();
								if(statess==2){
									statess='待付款'
									$('.timereduce').show();
									$('.statesPayTime').hide();
									var surpius=dataNow-stateTimeList;
									surpius=86400-surpius;
									console.log(surpius);
//									console.log(dataNow-stateTimeList);
//									console.log(maxtimes)
//									timerLate(surpius);
									countDown(surpius);
								}
								if(statess==3){
									statess='待发货'
								}
								if(statess==4){
									statess='待收货'
								}
								if(statess==5){
									statess='已完成'
								}
								if(statess==6){
									statess='已失效';
									$('.statesPayTime').hide();
								}
								
								
								var statesAddress1 = statesAddress.split(',');
								
								var strName=statesAddress1[0].split('：')
								var strMoible=statesAddress1[1].split('：')
								var strAddress=statesAddress1[2].split('：')
//								var pattern = "姓名：";
//								var dou = "，";
//								var statesAddress1 = statesAddress.replace(new RegExp(pattern), "");
//								var statesAddress2 = statesAddress1.replace(new RegExp(dou), "")
//								alert(statesAddress2)
								$('.statesImg').attr('src',statesImg)
								$('.states').html(statess);
								$('.statesAddress').html('<p><span style="width:25%;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;display: inline-block;" class="mui-pull-left">'+strName[1]+'</span><span>'+strMoible[1]+'</span></p><p>'+strAddress[1]+'</p>');
//								$('.statesAddressName').html(data.data.address.name);
//								$('.statesMobile').html(statesMobile);
								$('.statesName').html(statesName);
								$('.statesSpecific').html(statesSpecific);
								$('.statesAllprice').html('￥'+statesAllprice);
								$('.statesMobile').html(statesMobile);
								$('.statesMath').html('x'+statesMath);
								$('.statesNumber').html('订单编号：'+statesNumber);
								$('.statesPayTime').html('付款时间：'+statePayTime);
								$('.statesTime').html('创建时间：'+stateTime);
								$('.statesPay').html('￥'+statesAllprice);
							}
						});
						
							
						
						
						
	</script>	
</html>